<template>
  <div>
    <DialogNew v-model="is_show" @close="close" title="发货" width="500px">
      <div class="padding-sm" v-loading="loading">
        <el-form
          :model="form"
          ref="formRef"
          :rules="form.delivery_method === 1 ? OnlyRules : rules"
          label-width="120px"
        >
          <el-form-item v-if="fasle" prop="id" />
          <el-form-item label="发货方式" prop="sales_person_id">
            <el-radio-group v-model="form.delivery_method">
              <el-radio-button label="自行配送" :value="2" />
              <el-radio-button label="快递邮寄" :value="1" />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="物流公司"
            prop="logistics_compan"
            v-if="form.delivery_method == 1"
          >
            <el-select
              v-model="form.logistics_compan"
              placeholder="请选择物流公司"
            >
              <el-option
                v-for="item in companList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="物流单号"
            prop="logistics_no"
            v-if="form.delivery_method == 1"
          >
            <el-input v-model="form.logistics_no" placeholder="请输入单号" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="is_show = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" v-repeat>
          确定
        </el-button>
      </template>
    </DialogNew>
  </div>
</template>

<script setup>
  import DialogNew from '@/components/DialogNew/index.vue'
  import { message } from '@/utils/helper'
  import { logisticsCompanies } from '@/utils/helper'
  import { sendSingleShipment } from '@/api/single'
  import { sendSingleProxy } from '@/api/proxy'
  const props = defineProps({
    proxy: {
      type: Boolean,
      default: false,
    },
  })
  const is_show = ref(false)

  const loading = ref(false)
  const form = reactive({
    id: undefined,
    delivery_method: 2,
    logistics_compan: '',
    logistics_no: '',
  })
  const open = (row) => {
    is_show.value = true
    form.id = row.id
  }

  const close = () => {
    formRef.value.resetFields()
  }

  const rules = ref({
    delivery_method: [
      { required: true, message: '请选择发货方式', trigger: 'blur' },
    ],
    logistics_compan: [
      { required: true, message: '请选择物流公司', trigger: 'blur' },
    ],
    logistics_no: [
      { required: true, message: '请输入物流单号', trigger: 'blur' },
    ],
  })
  const OnlyRules = ref({
    delivery_method: [
      { required: true, message: '请选择发货方式', trigger: 'blur' },
    ],
  })
  const companList = ref(logisticsCompanies)

  const emits = defineEmits(['fetch-data'])

  const formRef = ref(null)
  const handleSubmit = () => {
    formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true
        try {
          const res = props.proxy
            ? await sendSingleProxy(form)
            : await sendSingleShipment(form)
          if (res.code === 200) {
            emits('fetch-data')
            message('设置成功')
            is_show.value = false
          }
        } catch (error) {
          loading.value = false
        }
      }
    })
  }

  defineExpose({ open })
</script>

<style lang="scss" scoped></style>
